import React from 'react'
import {add, sub, asyncAddAction} from '../app/features/countSlice';
import {add as ad, sub as su} from '../app/features/zanSlice';
//导入 useSelector hook 函数
import { useSelector } from 'react-redux';
//导入 useDispatch hook 函数
import { useDispatch } from 'react-redux';

export default function ReactReduxCom() {
  //获取 redux 中的状态. 参数是一个回调函数, 回调函数的第一个参数用来接收完整的状态. 
  // 回调函数的返回值, 将作为 useSelector 函数的返回值
  let count = useSelector(state => state.count);
  let zan = useSelector(state => state.zan.value);
  //获取 dispatch 函数
  let dispatch = useDispatch();
  return (
    <div>
      <h2>{count}</h2>
      <button onClick={() => {
        dispatch(add(10));
      }}>++</button>
      <button onClick={() => {
        dispatch(sub(10));
      }}>--</button>
      <button onClick={() => {
        dispatch(asyncAddAction(20));
      }}>1秒之后+1</button>
      <hr />
      <h2>当前的点赞数: {zan}</h2>
      <button onClick={() => {
        dispatch(ad(100));
      }}>点赞</button>
    </div>
  )
}
